<template>
  <div class="contest-create-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <i class="fas fa-trophy"></i>
          创建新比赛
        </h1>
        <p class="page-subtitle">设计和配置新的编程比赛</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <form @submit.prevent="submitContest" class="contest-form">
        <!-- 基础信息卡片 -->
        <div class="form-card">
          <div class="card-header">
            <h3><i class="fas fa-info-circle"></i> 基础信息</h3>
          </div>
          <div class="card-content">
            <div class="form-row">
              <div class="form-group">
                <label for="contestTitle">比赛名称 <span class="required">*</span></label>
                <input 
                  type="text" 
                  id="contestTitle"
                  v-model="formData.title"
                  placeholder="请输入比赛名称"
                  required
                >
              </div>
              <div class="form-group">
                <label for="contestType">比赛类型 <span class="required">*</span></label>
                <select id="contestType" v-model="formData.type" required>
                  <option value="">请选择比赛类型</option>
                  <option value="ACM/ICPC比赛">ACM/ICPC比赛</option>
                  <option value="OI比赛">OI比赛</option>
                  <option value="IOI比赛">IOI比赛</option>
                  <option value="Ledo 比赛">Ledo 比赛</option>
                  <option value="IOI(Strict)比赛">IOI(Strict)比赛</option>
                </select>
              </div>
            </div>

            <div class="form-group full-width">
              <label for="description">比赛描述 <span class="required">*</span></label>
              <textarea 
                id="description"
                v-model="formData.description"
                placeholder="请详细描述比赛内容、规则等信息"
                rows="4"
                required
              ></textarea>
            </div>
          </div>
        </div>

        <!-- 时间设置卡片 -->
        <div class="form-card">
          <div class="card-header">
            <h3><i class="fas fa-clock"></i> 时间设置</h3>
          </div>
          <div class="card-content">
            <div class="form-row">
              <div class="form-group">
                <label for="startTime">开始时间 <span class="required">*</span></label>
                <input 
                  type="text" 
                  id="startTime"
                  v-model="formData.startTime"
                  placeholder="2025-10-22 10:00:00"
                  required
                >
                <small class="form-hint">格式：YYYY-MM-DD HH:mm:ss</small>
              </div>
              <div class="form-group">
                <label for="endTime">结束时间 <span class="required">*</span></label>
                <input 
                  type="text" 
                  id="endTime"
                  v-model="formData.endTime"
                  placeholder="2025-10-22 13:00:00"
                  required
                >
                <small class="form-hint">格式：YYYY-MM-DD HH:mm:ss</small>
              </div>
            </div>
          </div>
        </div>

        <!-- 参赛设置卡片 -->
        <div class="form-card">
          <div class="card-header">
            <h3><i class="fas fa-users"></i> 参赛设置</h3>
          </div>
          <div class="card-content">
            <div class="form-row">
              <div class="form-group">
                <label for="maxParticipants">最大参赛人数</label>
                <input 
                  type="number" 
                  id="maxParticipants"
                  v-model.number="formData.maxParticipants"
                  placeholder="不限制人数请留空"
                  min="1"
                >
              </div>
            </div>
          </div>
        </div>

        <!-- 题目设置卡片 -->
        <div class="form-card">
          <div class="card-header">
            <h3><i class="fas fa-list"></i> 题目设置</h3>
          </div>
          <div class="card-content">
            <!-- 题目选择标签 -->
            <div class="section-tabs">
              <button 
                :class="['tab-btn', { active: activeTab === 'my' }]"
                @click="activeTab = 'my'"
                type="button"
              >
                我的试题
              </button>
              <button 
                :class="['tab-btn', { active: activeTab === 'public' }]"
                @click="activeTab = 'public'"
                type="button"
              >
                公开题库
              </button>
            </div>

            <!-- 搜索栏 -->
            <div class="search-filter-bar">
              <input 
                type="text" 
                v-model="searchKeyword" 
                placeholder="搜索题目标题..."
                class="search-input"
                @keyup.enter="searchQuestions"
              >
              <select v-model="searchDifficulty" class="difficulty-select">
                <option value="">全部难度</option>
                <option value="1">难度 1</option>
                <option value="2">难度 2</option>
                <option value="3">难度 3</option>
                <option value="4">难度 4</option>
                <option value="5">难度 5</option>
                <option value="6">难度 6</option>
              </select>
              <button @click="searchQuestions" class="search-btn" type="button">
                <i class="fas fa-search"></i>
                搜索
              </button>
              <button @click="resetSearch" class="reset-btn" type="button">
                <i class="fas fa-redo"></i>
                重置
              </button>
            </div>

            <!-- 题目列表 -->
            <div class="questions-list">
              <table class="questions-table">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>难度</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-if="availableQuestions.length === 0">
                    <td colspan="5" class="empty-row">
                      {{ activeTab === 'my' ? '暂无我的试题' : '暂无公开题目' }}
                    </td>
                  </tr>
                  <tr v-for="question in availableQuestions" :key="question.id">
                    <td>{{ question.id }}</td>
                    <td class="title-cell">{{ question.title }}</td>
                    <td>{{ question.type }}</td>
                    <td>{{ question.weight }}</td>
                    <td class="action-cell">
                      <button @click="addQuestion(question)" type="button" class="add-question-btn">+</button>
                    </td>
                  </tr>
                </tbody>
              </table>

              <!-- 分页 -->
              <div class="pagination" v-if="currentPagination.total > 0">
                <button 
                  @click="changePage(currentPagination.current - 1)" 
                  :disabled="currentPagination.current === 1"
                  class="page-btn"
                  type="button"
                >
                  上一页
                </button>
                <span class="page-info">
                  第 {{ currentPagination.current }} / {{ currentPagination.pages }} 页
                  (共 {{ currentPagination.total }} 条)
                </span>
                <div class="page-jump">
                  <input 
                    v-model.number="jumpPage" 
                    type="number" 
                    min="1" 
                    :max="currentPagination.pages"
                    placeholder="页码"
                    class="page-input"
                    @keyup.enter="jumpToPage"
                  />
                  <button @click="jumpToPage" type="button" class="jump-btn">跳转</button>
                </div>
                <button 
                  @click="changePage(currentPagination.current + 1)" 
                  :disabled="currentPagination.current === currentPagination.pages"
                  class="page-btn"
                  type="button"
                >
                  下一页
                </button>
              </div>
            </div>

            <!-- 已选题目 -->
            <div class="selected-questions">
              <h4>已选题目 ({{ selectedQuestions.length }} 道)</h4>
              <table class="questions-table" v-if="selectedQuestions.length > 0">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>难度</th>
                    <th>分数</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(question, index) in selectedQuestions" :key="question.id">
                    <td>{{ index + 1 }}</td>
                    <td class="title-cell">{{ question.title }}</td>
                    <td>{{ question.type }}</td>
                    <td>{{ question.weight }}</td>
                    <td class="score-cell">
                      <input 
                        v-model.number="question.score" 
                        type="number" 
                        min="0"
                        step="1"
                        placeholder="分数"
                        class="score-input"
                      />
                    </td>
                    <td class="action-cell">
                      <button @click="removeQuestion(index)" type="button" class="remove-question-btn">移除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div v-else class="empty-selected">
                请从题库中选择题目
              </div>
            </div>
          </div>
        </div>

        <!-- 其他设置卡片 -->
        <div class="form-card">
          <div class="card-header">
            <h3><i class="fas fa-cog"></i> 其他设置</h3>
          </div>
          <div class="card-content">
            <div class="form-row">
              <div class="form-group">
                <label>
                  <input 
                    type="checkbox" 
                    v-model="formData.isPublic"
                  >
                  公开比赛（所有人可见）
                </label>
              </div>
              <div class="form-group">
                <label for="password">
                  参赛密码 
                  <span v-if="!formData.isPublic" class="required">*</span>
                </label>
                <input 
                  type="text" 
                  id="password"
                  v-model="formData.password"
                  :placeholder="formData.isPublic ? '请输入参赛密码（可选）' : '请输入参赛密码（必填）'"
                  :required="!formData.isPublic"
                >
                <small class="form-hint">{{ formData.isPublic ? '留空表示无需密码' : '不公开比赛必须设置密码' }}</small>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="form-actions">
          <button type="button" @click="goBack" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i>
            取消
          </button>
          <button type="button" @click="saveAsDraft" class="btn btn-outline">
            <i class="fas fa-save"></i>
            保存草稿
          </button>
          <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
            <i class="fas fa-check"></i>
            {{ isSubmitting ? '创建中...' : '创建比赛' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import logger from '../utils/logger.js'
import { getMyCreatQuestion } from '@/api/homework'
import { getTestQuestionList } from '@/api/testQuestion'
import { createContest } from '@/api/contest'

export default {
  name: 'ContestCreate',
  data() {
    return {
      isSubmitting: false,
      activeTab: 'my', // 当前选中的标签页
      availableQuestions: [], // 可用题目列表
      selectedQuestions: [], // 已选择的题目
      jumpPage: null, // 跳转页码
      // 搜索条件
      searchKeyword: '',
      searchDifficulty: '',
      myQuestionsPagination: {
        current: 1,
        size: 10,
        total: 0,
        pages: 0
      },
      publicQuestionsPagination: {
        current: 1,
        size: 10,
        total: 0,
        pages: 0
      },
      formData: {
        title: '',
        type: '',
        description: '',
        startTime: '',
        endTime: '',
        password: '',
        maxParticipants: null,
        isPublic: true
      }
    }
  },
  computed: {
    // 当前使用的分页对象
    currentPagination() {
      return this.activeTab === 'my' ? this.myQuestionsPagination : this.publicQuestionsPagination
    }
  },
  watch: {
    // 监听标签页切换
    activeTab(newTab) {
      logger.log('🔄 [ContestCreate] 切换标签页:', newTab)
      if (newTab === 'my') {
        this.loadMyQuestions()
      } else {
        this.loadPublicQuestions()
      }
    },
    
    // 监听公开/不公开状态切换
    'formData.isPublic'(newValue) {
      logger.log('🔄 [ContestCreate] 比赛公开状态切换:', newValue ? '公开（密码选填）' : '不公开（密码必填）')
    }
  },
  
  mounted() {
    logger.log('📝 [ContestCreate] 创建比赛页面已加载')
    this.loadDraft()
    this.loadMyQuestions() // 默认加载我的试题
  },
  
  methods: {
    // 加载我的试题
    async loadMyQuestions(page = 1) {
      try {
        logger.log('📚 [ContestCreate] 开始获取我的试题，第', page, '页')
        
        // 构建查询参数
        const params = {
          page: page,
          size: this.myQuestionsPagination.size
        }
        
        // 添加搜索条件
        if (this.searchKeyword) {
          params.keyword = this.searchKeyword
          logger.log('🔍 [ContestCreate] 搜索关键词:', this.searchKeyword)
        }
        if (this.searchDifficulty) {
          params.difficulty = parseInt(this.searchDifficulty)
          logger.log('🔍 [ContestCreate] 搜索难度:', this.searchDifficulty)
        }
        
        const response = await getMyCreatQuestion(params)
        
        logger.log('✅ [ContestCreate] 我的试题获取成功:', response)
        
        const difficultyMap = {
          1: '简单题',
          2: '中等题',
          3: '困难题'
        }
        
        if (response && response.data && response.data.records) {
          this.myQuestionsPagination.current = response.data.current || page
          this.myQuestionsPagination.total = response.data.total || 0
          this.myQuestionsPagination.pages = response.data.pages || 0
          
          this.availableQuestions = response.data.records.map(question => ({
            id: question.id,
            title: question.questionName,
            type: 'toc',
            weight: difficultyMap[question.difficulty] || '简单题'
          }))
          
          logger.log('✅ [ContestCreate] 题目列表更新完成，总数:', this.availableQuestions.length)
        } else {
          this.availableQuestions = []
        }
      } catch (error) {
        logger.error('❌ [ContestCreate] 获取我的试题失败:', error)
        this.availableQuestions = []
      }
    },

    // 加载公开题库
    async loadPublicQuestions(page = 1) {
      try {
        logger.log('📚 [ContestCreate] 开始获取公开题库，第', page, '页')
        
        // 构建查询参数
        const params = {
          isPublic: 1,
          page: page,
          size: this.publicQuestionsPagination.size
        }
        
        // 添加搜索条件
        if (this.searchKeyword) {
          params.keyword = this.searchKeyword
          logger.log('🔍 [ContestCreate] 搜索关键词:', this.searchKeyword)
        }
        if (this.searchDifficulty) {
          params.difficulty = parseInt(this.searchDifficulty)
          logger.log('🔍 [ContestCreate] 搜索难度:', this.searchDifficulty)
        }
        
        const response = await getTestQuestionList(params)
        
        logger.log('✅ [ContestCreate] 公开题库获取成功:', response)
        
        const difficultyMap = {
          1: '简单题',
          2: '中等题',
          3: '困难题'
        }
        
        if (response && response.data && response.data.records) {
          this.publicQuestionsPagination.current = response.data.current || page
          this.publicQuestionsPagination.total = response.data.total || 0
          this.publicQuestionsPagination.pages = response.data.pages || Math.ceil(response.data.total / this.publicQuestionsPagination.size)
          
          this.availableQuestions = response.data.records.map(question => ({
            id: question.id,
            title: question.questionName,
            type: 'toc',
            weight: difficultyMap[question.difficulty] || '简单题'
          }))
          
          logger.log('✅ [ContestCreate] 公开题库列表更新完成，总数:', this.availableQuestions.length)
        } else {
          this.availableQuestions = []
        }
      } catch (error) {
        logger.error('❌ [ContestCreate] 获取公开题库失败:', error)
        this.availableQuestions = []
      }
    },

    // 搜索题目
    searchQuestions() {
      logger.log('🔍 [ContestCreate] 搜索题目')
      // 重置到第一页
      if (this.activeTab === 'my') {
        this.myQuestionsPagination.current = 1
        this.loadMyQuestions(1)
      } else {
        this.publicQuestionsPagination.current = 1
        this.loadPublicQuestions(1)
      }
    },
    
    // 重置搜索
    resetSearch() {
      logger.log('🔄 [ContestCreate] 重置搜索条件')
      this.searchKeyword = ''
      this.searchDifficulty = ''
      
      // 重置到第一页并重新加载
      if (this.activeTab === 'my') {
        this.myQuestionsPagination.current = 1
        this.loadMyQuestions(1)
      } else {
        this.publicQuestionsPagination.current = 1
        this.loadPublicQuestions(1)
      }
    },
    
    // 切换页码
    changePage(page) {
      if (page < 1 || page > this.currentPagination.pages) return
      
      if (this.activeTab === 'my') {
        this.loadMyQuestions(page)
      } else {
        this.loadPublicQuestions(page)
      }
    },

    // 添加题目到比赛
    addQuestion(question) {
      const exists = this.selectedQuestions.find(q => q.id === question.id)
      if (!exists) {
        this.selectedQuestions.push({ ...question, score: 0 })  // 添加score字段，默认为0
        logger.log('➕ [ContestCreate] 添加题目:', question)
      } else {
        alert('该题目已经添加过了')
      }
    },

    // 移除题目
    removeQuestion(index) {
      const removed = this.selectedQuestions.splice(index, 1)
      logger.log('➖ [ContestCreate] 移除题目:', removed[0])
    },

    // 跳转到指定页码
    jumpToPage() {
      if (!this.jumpPage) {
        alert('请输入页码')
        return
      }
      
      if (this.jumpPage < 1 || this.jumpPage > this.currentPagination.pages) {
        alert(`请输入有效的页码（1-${this.currentPagination.pages}）`)
        return
      }
      
      logger.log('🎯 [ContestCreate] 跳转到第', this.jumpPage, '页')
      this.changePage(this.jumpPage)
      this.jumpPage = null // 清空输入框
    },
    
    // 提交创建比赛
    async submitContest() {
      logger.log('🚀 [ContestCreate] 开始创建比赛')
      
      if (!this.validateForm()) {
        return
      }
      
      this.isSubmitting = true
      
      try {
        // 构建API请求数据
        const contestData = {
          name: this.formData.title,  // 比赛名称
          type: this.formData.type,  // 比赛类型（string）
          startTime: this.formData.startTime,  // 开始时间（string）
          endTime: this.formData.endTime,  // 结束时间（string）
          description: this.formData.description,  // 比赛描述（string）
          password: this.formData.password || '',  // 参赛密码（string，可选）
          isPublic: this.formData.isPublic,  // 是否公开（boolean）
          maxParticipants: this.formData.maxParticipants || 0,  // 最大人数限制（integer）
          questions: this.selectedQuestions.map((question, index) => ({
            testQuestionId: parseInt(question.id),  // 题目ID
            sortOrder: index + 1,  // 排序
            score: question.score || 0  // 分数
          }))
        }
        
        logger.log('📝 [ContestCreate] 提交数据:', contestData)
        logger.log('📊 [ContestCreate] 题目数量:', contestData.questions.length)
        
        // 调用创建比赛API
        const response = await createContest(contestData)
        
        logger.log('✅ [ContestCreate] API响应:', response)
        
        // 检查业务状态码
        if (response && response.code === 0) {
          logger.log('✅ [ContestCreate] 比赛创建成功（code = 0）')
          
          // 移除成功提示，直接跳转以改善用户体验
          // const successMsg = response.message || '比赛创建成功！'
          // alert(successMsg)
          
          // 清除草稿
          localStorage.removeItem('contestDraft')
          
          // 跳转到比赛管理页面
          this.$router.push('/contest-management')
        } else {
          // code !== 0，表示业务逻辑失败
          logger.error('❌ [ContestCreate] 比赛创建失败，业务状态码异常')
          logger.error('❌ [ContestCreate] code:', response?.code)
          logger.error('❌ [ContestCreate] message:', response?.message)
          
          const errorMsg = response?.message || '创建比赛失败，请检查输入信息'
          alert('❌ ' + errorMsg)
          
          return
        }
        
      } catch (error) {
        logger.error('❌ [ContestCreate] 创建比赛失败:', error)
        
        // 获取详细错误信息
        let errorMsg = '创建比赛失败，请重试'
        
        if (error.response?.data?.message) {
          errorMsg = error.response.data.message
        } else if (error.data?.message) {
          errorMsg = error.data.message
        } else if (error.message) {
          errorMsg = error.message
        }
        
        logger.error('❌ [ContestCreate] 显示错误消息:', errorMsg)
        alert('❌ ' + errorMsg)
      } finally {
        this.isSubmitting = false
      }
    },
    
    // 验证表单
    validateForm() {
      const required = ['title', 'type', 'description', 'startTime', 'endTime']
      
      for (let field of required) {
        if (!this.formData[field]) {
          alert(`请填写${this.getFieldLabel(field)}`)
          return false
        }
      }
      
      // 验证是否选择了题目
      if (this.selectedQuestions.length === 0) {
        alert('请至少选择一道题目')
        return false
      }
      
      // 验证时间格式
      const timeRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/
      if (!timeRegex.test(this.formData.startTime)) {
        alert('开始时间格式不正确，请使用格式：YYYY-MM-DD HH:mm:ss')
        return false
      }
      if (!timeRegex.test(this.formData.endTime)) {
        alert('结束时间格式不正确，请使用格式：YYYY-MM-DD HH:mm:ss')
        return false
      }
      
      // 验证时间先后顺序
      const startTime = new Date(this.formData.startTime.replace(' ', 'T'))
      const endTime = new Date(this.formData.endTime.replace(' ', 'T'))
      
      if (startTime >= endTime) {
        alert('结束时间必须晚于开始时间')
        return false
      }
      
      return true
    },
    
    // 获取字段标签
    getFieldLabel(field) {
      const labels = {
        title: '比赛名称',
        type: '比赛类型',
        description: '比赛描述',
        startTime: '开始时间',
        endTime: '结束时间'
      }
      return labels[field] || field
    },
    
    // 保存草稿
    saveAsDraft() {
      logger.log('💾 [ContestCreate] 保存草稿:', this.formData)
      localStorage.setItem('contestDraft', JSON.stringify(this.formData))
      alert('✅ 草稿已保存')
    },
    
    // 加载草稿
    loadDraft() {
      const draft = localStorage.getItem('contestDraft')
      if (draft) {
        try {
          const draftData = JSON.parse(draft)
          this.formData = { ...this.formData, ...draftData }
          logger.log('✅ [ContestCreate] 已加载草稿')
        } catch (error) {
          logger.error('❌ [ContestCreate] 加载草稿失败:', error)
        }
      }
    },
    
    // 返回上一页
    goBack() {
      if (confirm('确定要离开吗？未保存的数据将丢失')) {
        this.$router.go(-1)
      }
    }
  }
}
</script>

<style scoped>
.contest-create-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.header-content {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  display: inline-block;
}

.page-title {
  font-size: 2.5em;
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-weight: 700;
}

.page-title i {
  color: #667eea;
  margin-right: 15px;
}

.page-subtitle {
  font-size: 1.1em;
  color: #7f8c8d;
  margin: 0;
}

.content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

.contest-form {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 20px 30px;
  color: white;
}

.card-header h3 {
  margin: 0;
  font-size: 1.3em;
  font-weight: 600;
}

.card-header i {
  margin-right: 10px;
}

.card-content {
  padding: 30px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
  font-size: 0.95em;
}

.required {
  color: #e74c3c;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 15px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 0.95em;
  transition: all 0.3s ease;
  background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.form-group input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

.form-group textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.form-hint {
  margin-top: 5px;
  font-size: 0.85em;
  color: #7f8c8d;
  font-style: italic;
}

.form-group input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.btn {
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background: #95a5a6;
  color: white;
}

.btn-secondary:hover {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-outline:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

/* 题目选择样式 */
.section-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  background: #f5f5f5;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.tab-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border-color: #667eea;
}

.tab-btn:hover {
  border-color: #667eea;
}

/* 搜索过滤栏 */
.search-filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  align-items: center;
}

.search-filter-bar .search-input {
  flex: 1;
  padding: 10px 15px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-filter-bar .search-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-filter-bar .difficulty-select {
  padding: 10px 15px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 150px;
}

.search-filter-bar .difficulty-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-filter-bar .search-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.search-filter-bar .search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.search-filter-bar .reset-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #6c757d, #5a6268);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.search-filter-bar .reset-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.5);
}

.questions-list {
  margin-bottom: 30px;
}

.questions-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.questions-table th {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 12px;
  text-align: left;
  font-weight: 600;
}

.questions-table td {
  padding: 12px;
  border-bottom: 1px solid #e1e8ed;
}

.questions-table tr:hover {
  background: #f5f7fa;
}

.title-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-cell {
  text-align: center;
}

.add-question-btn {
  background: #4CAF50;
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.add-question-btn:hover {
  background: #45a049;
  transform: scale(1.1);
}

.remove-question-btn {
  background: #f44336;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.remove-question-btn:hover {
  background: #da190b;
}

.empty-row {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
  font-style: italic;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 15px 0;
}

.page-btn {
  padding: 8px 16px;
  background: white;
  border: 2px solid #667eea;
  color: #667eea;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  background: #667eea;
  color: white;
}

.page-btn:disabled {
  border-color: #ccc;
  color: #ccc;
  cursor: not-allowed;
  opacity: 0.5;
}

.page-info {
  font-size: 14px;
  color: #666;
}

.page-jump {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-input {
  width: 70px;
  padding: 8px 10px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
}

.page-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.jump-btn {
  padding: 8px 16px;
  background: white;
  border: 2px solid #667eea;
  color: #667eea;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.jump-btn:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

.selected-questions {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid #e1e8ed;
}

.selected-questions h4 {
  font-size: 1.2em;
  color: #2c3e50;
  margin-bottom: 15px;
}

.empty-selected {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
  font-style: italic;
  background: #f5f7fa;
  border-radius: 8px;
}

/* 分数输入框样式 */
.score-cell {
  padding: 8px;
}

.score-input {
  width: 80px;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s;
}

.score-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.score-input:hover {
  border-color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .contest-create-page {
    padding: 10px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .page-title {
    font-size: 2em;
  }
  
  .card-content {
    padding: 20px;
  }
  
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn {
    justify-content: center;
  }

  .section-tabs {
    flex-direction: column;
  }

  .tab-btn {
    width: 100%;
  }

  .questions-table {
    font-size: 12px;
  }

  .questions-table th,
  .questions-table td {
    padding: 8px;
  }
}
</style>

